<template>
    <div class="background_classify">
        <button @click="classifyActive = 0" :class="{ 'classify_btn_active': classifyActive == 0 }"
            class="classify_btn">全部</button>
        <button @click="classifyActive = 1" :class="{ 'classify_btn_active': classifyActive == 1 }"
            class="classify_btn">最新</button>
        <button @click="classifyActive = 2" :class="{ 'classify_btn_active': classifyActive == 2 }"
            class="classify_btn">最多</button>
    </div>

    <WallpaperItem :loading="loading" :column="5" :data="15"></WallpaperItem>

</template>

<script>
import WallpaperItem from '../components/parent_plant/WallpaperItem.vue'
export default {
    data() {
        return {
            loading: false,
            classifyActive: 0,
            wallpaperList: []
        }
    }, components: {
        WallpaperItem
    }, methods: {

    }

}
</script>







<style>
.classify_btn {
    width: 100px;
    height: 30px;
    background-color: #e5e5e5;
    border-radius: var(--raduis);
    border: none;
    margin: 10px;
}

/* .classify_btn:hover {
    background-color: #fff;
    color: black;
} */

.classify_btn_active {
    background: black;
    color: #fff;
}
</style>